<template>
	<view>
		<view class="box">
			<view class="title">
				<view class="img">
					<image class="ig" src="../../static/images/banner/2.jpg"></image>
				</view>
				<view>
					<p>jjkkk</p>
					<p style="color: gray;font-size: 11px;margin-top:15px;">2023-07-26 15:00:00</p>
				</view>
				<view style="position: absolute;right:10px;">
					<uni-rate v-model="rateValue" color="gray" @change="onChange" />
				</view>
			</view>
			<view class="demo">
				<view style="background-color: white;padding-bottom: 10px;">
					<uni-easyinput type="textarea"autoHeight v-model="value" placeholder="请对这次体验做出评价,非常感谢!"></uni-easyinput>
					<view class="example-body">
						<uni-file-picker limit="9"></uni-file-picker>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;padding: 10px;">
					<p>#电动滑板（限重5kg）</p>
					<p style="display: flex;align-items: center;margin-right: 10px;">
						<uni-icons type="location" size="30"></uni-icons>
						美国
					</p>
				</view>
			</view>
			<button type="primary" style="width:90%;margin: auto; background-color: #E99D42;margin-top:20px;">提交评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			}
		},
		methods: {
		onChange(e) {
					console.log('rate发生改变:' + JSON.stringify(e))
					// console.log(this.rateValue);
				},	
		}
	}
</script>

<style lang="scss">
	.box{
		margin-bottom: 10px;
		padding-top: 5px;
		padding-bottom: 10px;
		position: relative;
	}
	.title{
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}
.img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-right: 10px;
}
.ig{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.ig1{
	width: 80px;
	height: 80px;
	margin: 10px;
}
.demo{
	border-top: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
}
.example-body {
	margin:5px;
		// background-color: rebeccapurple;
	}
</style>
